<title>数据查询(单位)</title>
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb" lay-separator=">">
        <a lay-href=""><i class="layui-icon layui-icon-locate"></i>您当前的位置：</a>
        <a><cite>指标数据</cite></a>
        <a><cite>数据查询(单位)</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space12">
        <div class="layui-col-md3">
            <div class="layui-param-left">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div class="layui-header-title">
                            <i class="layui-icon param-icon"></i>数据选择
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div class="custom-ztree">
                            <table id="indexdata-table" lay-filter="indexdata-table-filter"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md9">
            <div class="layui-param-right">
                <div class="layui-form-top">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <div class="layui-header-title">
                                <i class="layui-icon search-icon"></i>数据查询
                            </div>
                        </div>
                        <div class="layui-card-body">
                            <div class="layui-btn-container">
                                <button type="button" class="layui-btn layui-btn-export T-btn" data-target="export">导出数据</button>
                                <button type="button" class="layui-btn layui-btn-download T-btn" data-target="allDown">
                                    <i class="layui-icon layui-icon-download-circle"></i>批量下载
                                </button>
                                <button type="button" class="layui-btn layui-btn-download T-btn" data-target="eachDown">
                                    <i class="layui-icon layui-icon-download-circle"></i>分省下载
                                </button>
                            </div>
                            <table id="my-custom-table" lay-filter="indicators-table"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .layui-param-left, .layui-param-right{
        height: 837px;
        background:#F2F7FD;
        border:1px solid #90ABCD;
        border-radius:4px;
        overflow: hidden;
    }
    .layui-param-left .layui-card, .layui-param-right .layui-card{
        background: #F2F7FD;
        box-shadow: none;
    }
    .layui-header-title{
        padding-left: 30px;
        position: relative;
    }
    .layui-card-header{
        height: 39px;
        line-height: 39px;
        border-bottom: 1px solid #D0D3DB;
    }
    .layui-card-header .param-icon, .layui-card-header .search-icon{
        width: 19px;
        background-size: cover;
        margin-top: -10px;
        left: 0px;
    }
    .layui-card-header .param-icon{
        height: 19px;
        background: url('/dist/style/res/formFill/tem-task.png') no-repeat center center;
    }
    .layui-card-header .search-icon{
        height: 21px;
        background: url('/dist/style/res/param/dataQuery/search.png') no-repeat center center;
    }
    .custom-ztree{
        border: 1px solid #A3C4ED;
        height: 760px;
        border-radius: 5px;
        overflow: hidden;
    }
    .layui-param-left .layui-card-body{
        padding: 13px 10px 0 10px;
    }
    .icon-progress{
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }
    .layui-layer-tips{
        position: relative;
        z-index: 2;
        box-shadow: 0px 0px 5px #cccccc;
    }
    .layui-layer-tips .layui-icon-close{
        position: absolute;
        color: #000000;
        right: 0;
        top: 0;
        cursor: pointer;
    }
    .layui-layer-tips i.layui-layer-TipsR{
        top: 50%;
        margin-top: -8px;
    }
    .layui-layer-tips .layui-layer-content{
        text-align: center;
        border-radius: 5px;
        padding-top: 18px;
    }
    .my-table-btn-clock{
        width: 24px;
        height: 22px;
        background: url('/dist/style/res/param/dataQuery/clock.png') no-repeat center center;
        background-size: contain;
        border-color: #4ECB64;
        cursor: pointer;
    }
    .my-table-btn-clock:hover{
        background-image: url('/dist/style/res/param/dataQuery/clock-h.png');
    }
    .tool a{
        display: inline-block;
        margin-bottom: 9px;
    }
    .layui-form-top .layui-card-body{
        padding: 15px;
    }
    .layui-table tr td{
        text-align: center;
        vertical-align: middle;
    }
    #my-custom-table{
        border: 1px solid #D2D2D2;
    }
    .layui-form-bottom{
        padding: 10px 12px 0;
    }
    .layui-form-bottom table{
        border: 1px solid #D2D2D2;
        background-color: #F2F7FD;
    }
    .layui-btn-download, .layui-btn-export, .layui-btn-downFile{
        width: 100px;
        height: 30px;
        line-height: 30px;;
    }
    .layui-btn-downFile{
        height: 25px;
        line-height: 25px;
        background-color: #2669B1;
    }
    .layui-btn-export{
        background: url('/dist/style/res/param/dataQuery/export.png') no-repeat 9px 7px #2669B1;
        padding-left: 32px;
    }
    .layui-btn-download{
        padding: 0;
        background-color: #2669B1;
    }
    .factors{
        text-align: right;
    }
    .factors .factor-item{
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
    }
    .factor-item-build, .factor-item-done{
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 5px;
    }
    .factor-item-build-text, .factor-item-done-text{
        font-size: 14px;
        color: #666666;
    }
    .layui-icon-sign{
        display: inline-block;
        width: 25px;
        height: 23px;
        background: url('/dist/style/res/param/dataQuery/clock.png') no-repeat center center;
        background-size: cover;
        vertical-align: middle;
        margin-top: -7px;
    }
    .layui-icon-sign:hover{
        background-image: url('/dist/style/res/param/dataQuery/clock-h.png');
    }
    .layui-badge {
		height: 23px;
		line-height: 23px;
		border-radius: 10px;
        padding: 0 21px;
    }
    .layui-table tbody tr.lineactive {
        background-color: #FDE7A3 !important;
    }
    .layui-btn-record{
        height: 28px;
        line-height: 28px;
        background-color: #2669B1;
        margin-left: 10px;
    }
    @media screen and (min-width: 992px){
        .layui-col-md3 {
            width: 20%;
        }
        .layui-col-md9{
            width: 80%;
        }
    }
    .layui-table-page{
        line-height: 41px;
    }
    .layui-table-page .layui-laypage a, .layui-table-page .layui-laypage span.layui-laypage-curr {
        padding: 0 5px;
    }
</style>

<!-- 操作栏工具栏 -->
<script type="text/html" id="opelTol">
    <a class="layui-icon layui-icon-sign" lay-tips="下发" lay-event="sign"></a>
</script>

<!-- 状态模板 -->
<script type="text/html" id="temporarystatusTpl">
    {{#
		var getStatusColor = function() {
			var mapColors = {
                '00': 'layui-bk-green',
                '05': 'layui-bk-orange',
                '20': 'layui-bk-gray',
                '25': 'layui-bk-orange',
                '30': 'layui-bk-green',
                '40': 'layui-bk-orange',
                '90': 'layui-bk-gray',
                '99': 'layui-bk-gray'
			};
			return mapColors[d.state] || '';
		};
	}}
	<span class="custom-badge {{getStatusColor()}}">{{d.statename}}</span>	
</script>

<!-- 输入框模板 -->
<script type="text/html" id="datascore">
    {{# if(d.examine === 0){ }}
        <button type="button" class="layui-btn layui-btn-sm layui-btn-warn T-btn" data-target="examine" data-examine="{{d.examine_record}}"></button>
    {{# } }}
    {{# if(!!d.write_value){ }}
        <input type="text" name="percent{{d.LAY_TABLE_INDEX}}" id="percent{{d.LAY_TABLE_INDEX}}" data-id="{{d.id}}" data-itemId="{{d.item_id}}" data-showVal="{{d.show_value}}" data-writeVal="{{d.write_value}}" class="layui-input my-input-style" value="{{d.write_value}}"/>
    {{# }else if(!!d.show_value){ }}
        <input type="text" name="percent{{d.LAY_TABLE_INDEX}}" id="percent{{d.LAY_TABLE_INDEX}}" data-id="{{d.id}}" data-itemId="{{d.item_id}}" data-showVal="{{d.show_value}}" data-writeVal="{{d.write_value}}" class="layui-input my-input-style" value="{{d.show_value}}"/>
    {{# }else if(!!d.datascore){ }}
        <input type="text" name="percent{{d.LAY_TABLE_INDEX}}" id="percent{{d.LAY_TABLE_INDEX}}" data-id="{{d.id}}" data-itemId="{{d.item_id}}" data-showVal="{{d.show_value}}" data-writeVal="{{d.write_value}}" class="layui-input my-input-style" value="{{d.datascore}}"/>
    {{# }else{ }}
        <input type="text" name="percent{{d.LAY_TABLE_INDEX}}" id="percent{{d.LAY_TABLE_INDEX}}" data-id="{{d.id}}" data-itemId="{{d.item_id}}" data-showVal="{{d.show_value}}" data-writeVal="{{d.write_value}}" class="layui-input my-input-style" value=""/>
    {{# } }}
    <span>请输入数值。</span>
</script>

<script>
    layui.use(['admin', 'form', 'laydate', 'upload', 'table', 'tools', 'tableMerge'], function(){
        var admin = layui.admin,
            form = layui.form,
            laydate = layui.laydate,
            upload = layui.upload,
            table = layui.table,
            tools = layui.tools,
            view = layui.view,
            tableMerge = layui.tableMerge;
            
        var taskId = '',
            layout = ['.layui-table th', '.layui-table td'];

        getTaskTree(); //加载任务表格

        //加载任务表格
        function getTaskTree(){
            table.render({
                elem: '#indexdata-table',
                url: 'myapi/DC/api/rest/web/custom/IndexDataTaskQuery',
                where: {
                    model: 'quser',
                    access_token: layui.data('layuiAdmin').access_token
                },
                height: 760,
                even: true,
                text: {
                    none: '<div class="no-data-tips"><img src="/src/style/res/about/empty.png"><p style="color:#DBDBDB;">暂无数据</p></div>'
                },
                page: {
                    groups: 1, 
                    limit: 10,
                    next:'<i class="layui-icon">&#xe602;</i>',
                    prev:'<i class="layui-icon">&#xe603;</i>',
                    first: '<i class="layui-icon">&#xe65a;</i>',
                    last: '<i class="layui-icon">&#xe65b;</i>',
                    layout: ['refresh', 'first', 'prev', 'skip', 'allPage', 'next', 'last'],
                    extend:{
                        first: true, //是否显示首页
                        spr: false,//是否显示页码分页符号 默认显示
                        pagecount: true//页码是否显示总数  groups=1时才有效
                    }
                },
                request: {
                    limitName: 'count'
                },
                parseData: function(res){
                    var data = res.data;
                    return {
                        "code": data.retcode, //解析接口状态
                        "msg": data.retmsg, //解析提示文本
                        "count": data.data.totalNumber, //解析数据长度
                        "data": data.data.data //解析数据列表
                    };
                },
                cols: [[
                    {
                        field: 'taskname', 
                        title:'任务名', 
                        align: 'center',
                        templet: function(d){
                            return '<span lay-tips='+d.taskname+'>'+d.taskname+'</span>'
                        }
                    },
                    {field: 'state', title: '状态', align: 'center',templet: '#temporarystatusTpl'}
                ]],
                done: function(res, curr, count){
                    if(res.data && res.data.length > 0){
                        taskId = res.data[0].id;
                        $('[lay-id="indexdata-table"]').find('tbody tr').eq(0).addClass('lineactive');
                        initTable(taskId);
                    }
                    tools.setFont(layout);
                }
            })
        }

        /* 加载数据表格
            @param taskid 选择的任务id
        */
        function initTable(taskid){
            admin.req({
                url: 'myapi/DC/api/rest/web/custom/GetIndexTaskQeryForm',
                data: {
                    taskid: taskid
                },
                done: function(res){
                    if(res.data.retcode == 0){
                        var head = res.data.data.head,
                            data = res.data.data.data,
                            toolCols = [
                                {field: 'datascore', templet: '#datascore', align: 'center', width: 200},
                                {type: 'checkbox', align: 'center', width: 200}
                            ];
                        for(var i = 0; i < head.length; i++){
                            if(i == 0){ head[i].merge = true; }
                            else{ head[i].merge = [head[i-1].field, head[i].field]; }
                            head[i].minWidth = 200;
                            head[i].align = 'center';
                            (function(i){ 
                                head[i].templet = function(d){
                                    var field = d[head[i].field];
                                    if(field != 'datascore'){
                                        return '<span lay-tips='+field+'>'+field+'</span>' ;
                                    }
                                };
                            })(i);
                        }
                        head = head.concat(toolCols);
                        table.render({
                            elem: '#my-custom-table',
                            height: 710,
                            title: 'xxxxxxxx标题',
                            text: {
                                none: '暂无数据'
                            },
                            limit: 10000,
                            data: data,
                            cols: [head],
                            done: function(res, curr, count){
                                if(res.data && res.data.length > 0){
                                    tableMerge.render(this);
                                    var allTrs = $('[lay-id="my-custom-table"] tbody tr');
                                    $.each(allTrs, function(index, item){
                                        var btnNode = '<button type="button" class="layui-btn layui-btn-record T-btn" data-target="record" data-id='+res.data[index].id+'>查看记录</button>';
                                        $(this).find('td:last-of-type .layui-table-cell').append(btnNode);
                                    })
                                }
                                tools.setFont(layout);
                            }
                        })
                    }
                }
            })        
        }

        //监听行点击事件
        table.on('row(indexdata-table-filter)', function(obj){
            var data = obj.data;
            $('[lay-id="indexdata-table"]').find(obj.tr.selector).addClass('lineactive');
            $('[lay-id="indexdata-table"]').find(obj.tr.selector).siblings().removeClass('lineactive');
            taskId = data.id;
            initTable(taskId);
        })

        //点击事件
        $('.layui-param-right').delegate('.T-btn', 'click', function(){
            var target = $(this).data('target');
            switch(target){
                case 'record':
                    admin.req({
                        url: 'myapi/DC/api/rest/web/custom/GetIndexTaskOperatingData',
                        data: {
                            taskid: taskId
                        },
                        done:function(res){
                            var result = res.data;
                            if(result.retcode == 0){
                                if(result.data && result.data.length > 0){
									layer.open({
										id: 'temporary-addhtml',
										title:'<i class="formFill-icon"></i><span style="color:#FFF;">查看记录</span>',
										offset: '110px',
										type: 1,
										shadeClose: true,
										area: ['350px', '400px'],
										resize: false,
										success: function(lay, index){
											view(this.id).render('./task/temporary/history', {history: result.data});
										}
									})
								}else{
									layer.msg('暂无记录', {time: 1000});
								}
                            }
                        }
                    })
                    break;
                case 'export':
                    location.href = 'myapi/DC/api/rest/web/custom/DCIndexDerivedCommonForm?taskid='+taskId+'&access_token='+layui.data('layuiAdmin').access_token
                    break;
                case 'allDown':
                    if(taskId){
                        location.href = 'myapi/DC/api/rest/web/custom/IndexTaskFilePackDownload?taskid='+taskId+'&access_token='+layui.data('layuiAdmin').access_token
                    }else {
                        layer.msg('暂无下载附件的任务', {time: 1500});
                    }
                    break;
                case 'eachDown': 
                    if(taskId){
                        layer.open({
                            id: 'file-table',
                            title:'<i class="formFill-icon"></i><span style="color:#FFF;">分省下载</span>',
                            offset: '110px',
                            type: 1,
                            shadeClose: true,
                            area: ['500px', '450px'],
                            resize: false,
                            success: function(lay, index){
                                view(this.id).render('./param/component/fileList', {taskid: taskId});
                            }
                        })
                    }else{
                        layer.msg('暂无下载附件的任务', {time: 1500});
                    }
                    break;
                    case 'examine':
                        var recordHtml = $(this).data('examine').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                        layer.open({
                            id: 'examinePage',
                            title:'<i class="formFill-icon"></i><span style="color:#FFF;">格检详情</span>',
                            offset: '110px',
                            type: 1,
                            shadeClose: true,
                            area: ['400px', '300px'],
                            resize: false,
                            content: '<div class="layui-card-body">'+recordHtml+'</div>'
                        })
                    break;
                default: 
                    break;
            }
        })
    })
</script>